<script setup lang="ts">
  import router from '@/router'
  const props = defineProps({
    searchResult: {
      type: Object,
      required: true,
    },
  })
</script>

<template>
  <div class="app-container">
    <div v-for="(v,i) in props.searchResult" :key="i" class="list" @click="router.push({ path: '/play', query: { id: v.id, name: v.name } })">
      <div class="name">{{ v.name }}</div>
      <div v-if="searchResult.length>1" class="info" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.app-container{
  height: calc(100vh - 55px);
  overflow: hidden;
  overflow-y: auto;
  .list{
    width: 100%;
    height: 40px;
    line-height: 40px;
    .name{
      color: #456ebd;
      font-size: 14px;
    }
    .info{
      display: flex;
      .singing{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 7px;
        padding: 1px;
        background: red;
        color: white;
        border-radius: 2px;
        margin-right: 5px;
      }
      .quality{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 7px;
        border: 1px solid #ffc400;
        color: #ffc400;
        padding: 1px;
        border-radius: 2px;
      }
    }
  }
}
</style>
